<template>
	<view>
		<!-- 粘性布局 -->
		<view class="stickyBox" :style="'top:' + stickyTop + 'px'">
			<u-tabs :list="tabsList" lineWidth="32rpx" lineHeight="8rpx" lineColor="#FF7803" :scrollable="false"
				:activeStyle="{
			            color: '#333',
			            fontWeight: '500',
			            fontSize: '32rpx'
			        }" :inactiveStyle="{
			            color: '#999',
			            fontSize: '28rpx'
			        }" @click="clickTabs">
			</u-tabs>
		</view>

		<!-- 明细 -->
		<view class="show-data-item" v-for="(item,index) in showData" :key="index">
			<view class="left">
				<view class="left-name">
					{{item.name}}
				</view>
				<view class="left-time">
					{{item.time}}
				</view>
			</view>
			<view class="right">
				{{item.num}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶
				stickyTop: 0,
				// 展示数据
				showData: [],

				tabsList: [{
					name: '爆点获取'
				}, {
					name: '爆点使用'
				}],

				// 爆点获取数据
				dataAdd: [{
					name: '签到奖励',
					time: '2050-08-05 19:58:18',
					num: '+1'
				}, {
					name: '奖品兑换',
					time: '2050-08-05 19:58:18',
					num: '+200'
				}, {
					name: '红包奖励',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '微信充值',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '奖品兑换',
					time: '2050-08-05 19:58:18',
					num: '+200'
				}, {
					name: '红包奖励',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '微信充值',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '奖品兑换',
					time: '2050-08-05 19:58:18',
					num: '+200'
				}, {
					name: '红包奖励',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '微信充值',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '奖品兑换',
					time: '2050-08-05 19:58:18',
					num: '+200'
				}, {
					name: '红包奖励',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '微信充值',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}],

				// 爆点使用数据
				dataCut: [{
					name: '运费支付',
					time: '2050-08-05 19:58:18',
					num: '-15'
				}, {
					name: '一番赏抽盒',
					time: '2050-08-05 19:58:18',
					num: '-39'
				}, {
					name: '购买***商品',
					time: '2050-08-05 19:58:18',
					num: '-399'
				}]
			}
		},
		mounted() {
			this.showData = this.dataAdd
			this.stickyTop = uni.getSystemInfoSync().windowTop
		},
		methods: {
			clickTabs(item) {
				if (item.name === this.tabsList[0].name) {
					this.showData = this.dataAdd
				} else {
					this.showData = this.dataCut
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.stickyBox {
		position: sticky;
		// top: 88rpx;

		// 在微信小程序 top值为0
		// #ifdef MP-WEIXIN 
		top: 0;
		// #endif

		width: 100vw;
		padding: 0 0 20rpx;
		background: #fff;

		z-index: 999;
	}

	.show-data-item {
		display: flex;
		justify-content: space-between;
		padding: 32rpx 40rpx;
		font-size: 26rpx;
		font-weight: 500;
		line-height: 26rpx;
		color: #333;

		.left {
			.left-time {
				margin-top: 16rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #999;
			}
		}

		.right {
			font-size: 32rpx;
			line-height: 44rpx;
			text-align: right;
		}

		&:last-child {
			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		}
	}
</style>
